"use client"

import { useEffect, useRef } from "react"

// 柱状图
export const BarChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2 // 除以2是因为我们已经缩放了canvas
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制柱状图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const barWidth = chartWidth / labels.length / 2
      const maxValue = Math.max(...dataset.data) || 1 // 防止除以0

      // 绘制数据
      ctx.fillStyle = dataset.backgroundColor || "#3498db"
      dataset.data.forEach((value, index) => {
        const barHeight = (value / maxValue) * chartHeight
        const x = padding + index * (chartWidth / labels.length) + barWidth / 2
        const y = canvas.height / 2 - padding - barHeight

        ctx.fillRect(x, y, barWidth, barHeight)
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / labels.length) + barWidth
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 折线图
export const LineChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme, tension = 0.4 } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制折线图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data)

      // 绘制折线
      ctx.beginPath()
      ctx.strokeStyle = dataset.borderColor || "#3498db"
      ctx.lineWidth = options.borderWidth || 2

      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight

        if (index === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })
      ctx.stroke()

      // 绘制点
      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight

        ctx.beginPath()
        ctx.arc(x, y, 4, 0, Math.PI * 2)
        ctx.fillStyle = dataset.borderColor || "#3498db"
        ctx.fill()
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 饼图
export const PieChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制饼图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const total = dataset.data.reduce((sum, value) => sum + value, 0)

      const centerX = canvas.width / 4
      const centerY = canvas.height / 4
      const radius = Math.min(centerX, centerY) - 40

      let startAngle = 0

      // 生成颜色数组
      const colors = [
        "#3498db",
        "#2ecc71",
        "#e74c3c",
        "#f39c12",
        "#9b59b6",
        "#1abc9c",
        "#34495e",
        "#e67e22",
        "#7f8c8d",
        "#c0392b",
      ]

      // 绘制扇形
      dataset.data.forEach((value, index) => {
        const sliceAngle = (value / total) * 2 * Math.PI

        ctx.beginPath()
        ctx.moveTo(centerX, centerY)
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle)
        ctx.closePath()

        ctx.fillStyle = colors[index % colors.length]
        ctx.fill()

        // 绘制标签
        const labelAngle = startAngle + sliceAngle / 2
        const labelX = centerX + Math.cos(labelAngle) * (radius * 0.7)
        const labelY = centerY + Math.sin(labelAngle) * (radius * 0.7)

        ctx.fillStyle = "#ffffff"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.font = "12px Arial"
        ctx.fillText(`${Math.round((value / total) * 100)}%`, labelX, labelY)

        startAngle += sliceAngle
      })

      // 绘制图例
      if (options.showLegend) {
        const legendX = canvas.width / 2 - 100
        const legendY = 40

        labels.forEach((label, index) => {
          const y = legendY + index * 25

          // 绘制颜色方块
          ctx.fillStyle = colors[index % colors.length]
          ctx.fillRect(legendX, y, 15, 15)

          // 绘制标签文本
          ctx.fillStyle = textColor
          ctx.textAlign = "left"
          ctx.textBaseline = "middle"
          ctx.font = "12px Arial"
          ctx.fillText(label, legendX + 25, y + 7)
        })
      }
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 面积图
export const AreaChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme, tension = 0.4 } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制面积图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data)

      // 绘制面积
      ctx.beginPath()
      ctx.moveTo(padding, canvas.height / 2 - padding)

      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight

        if (index === 0) {
          ctx.lineTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })

      ctx.lineTo(padding + chartWidth, canvas.height / 2 - padding)
      ctx.closePath()

      ctx.fillStyle = dataset.backgroundColor || "rgba(52, 152, 219, 0.2)"
      ctx.fill()

      // 绘制线
      ctx.beginPath()
      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight

        if (index === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })

      ctx.strokeStyle = dataset.borderColor || "#3498db"
      ctx.lineWidth = options.borderWidth || 2
      ctx.stroke()

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 仪表盘
export const GaugeChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制仪表盘
    if (datasets && datasets.length > 0) {
      const value = datasets[0].data[0] || 0
      const percentage = Math.min(100, Math.max(0, value)) / 100

      const centerX = canvas.width / 4
      const centerY = canvas.height / 4
      const radius = Math.min(centerX, centerY) - 20

      // 绘制外圈
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI)
      ctx.lineWidth = 10
      ctx.strokeStyle = "#f1f1f1"
      ctx.stroke()

      // 绘制进度
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + percentage * Math.PI)
      ctx.lineWidth = 10
      ctx.strokeStyle = datasets[0].backgroundColor || "#3498db"
      ctx.stroke()

      // 绘制数值
      ctx.fillStyle = textColor
      ctx.font = "bold 24px Arial"
      ctx.textAlign = "center"
      ctx.textBaseline = "middle"
      ctx.fillText(`${Math.round(percentage * 100)}%`, centerX, centerY + radius / 2)
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 散点图
export const ScatterChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制散点图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data)

      // 绘制点
      ctx.fillStyle = dataset.backgroundColor || "#3498db"
      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight

        ctx.beginPath()
        ctx.arc(x, y, 6, 0, Math.PI * 2)
        ctx.fill()
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 雷达图
export const RadarChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制雷达图
    if (datasets && datasets.length > 0 && labels.length > 0) {
      const dataset = datasets[0]
      const centerX = canvas.width / 4
      const centerY = canvas.height / 4
      const radius = Math.min(centerX, centerY) - 40
      const sides = labels.length

      // 绘制背景网格
      for (let level = 1; level <= 5; level++) {
        const levelRadius = radius * (level / 5)

        ctx.beginPath()
        for (let i = 0; i <= sides; i++) {
          const angle = (Math.PI * 2 * i) / sides - Math.PI / 2
          const x = centerX + levelRadius * Math.cos(angle)
          const y = centerY + levelRadius * Math.sin(angle)

          if (i === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        }
        ctx.closePath()
        ctx.strokeStyle = "rgba(200, 200, 200, 0.2)"
        ctx.stroke()
      }

      // 绘制轴线
      for (let i = 0; i < sides; i++) {
        const angle = (Math.PI * 2 * i) / sides - Math.PI / 2
        const x = centerX + radius * Math.cos(angle)
        const y = centerY + radius * Math.sin(angle)

        ctx.beginPath()
        ctx.moveTo(centerX, centerY)
        ctx.lineTo(x, y)
        ctx.strokeStyle = "rgba(200, 200, 200, 0.5)"
        ctx.stroke()

        // 绘制标签
        const labelX = centerX + (radius + 20) * Math.cos(angle)
        const labelY = centerY + (radius + 20) * Math.sin(angle)

        ctx.fillStyle = textColor
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.font = "12px Arial"
        ctx.fillText(labels[i], labelX, labelY)
      }

      // 绘制数据
      const maxValue = Math.max(...dataset.data)
      const dataPoints = dataset.data.map((value, i) => {
        const angle = (Math.PI * 2 * i) / sides - Math.PI / 2
        const distance = (value / maxValue) * radius
        return {
          x: centerX + distance * Math.cos(angle),
          y: centerY + distance * Math.sin(angle),
        }
      })

      ctx.beginPath()
      dataPoints.forEach((point, i) => {
        if (i === 0) {
          ctx.moveTo(point.x, point.y)
        } else {
          ctx.lineTo(point.x, point.y)
        }
      })
      ctx.lineTo(dataPoints[0].x, dataPoints[0].y)
      ctx.fillStyle = dataset.backgroundColor || "rgba(52, 152, 219, 0.2)"
      ctx.fill()
      ctx.strokeStyle = dataset.borderColor || "#3498db"
      ctx.lineWidth = options.borderWidth || 2
      ctx.stroke()

      // 绘制数据点
      dataPoints.forEach((point) => {
        ctx.beginPath()
        ctx.arc(point.x, point.y, 4, 0, Math.PI * 2)
        ctx.fillStyle = dataset.borderColor || "#3498db"
        ctx.fill()
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 热力图
export const HeatmapChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制热力图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data)

      const cellWidth = (canvas.width / 2 - 80) / labels.length
      const cellHeight = (canvas.height / 2 - 80) / dataset.data.length

      // 绘制单元格
      dataset.data.forEach((value, index) => {
        const intensity = value / maxValue
        const r = Math.floor(255 * intensity)
        const g = Math.floor(100 * (1 - intensity))
        const b = Math.floor(100 * (1 - intensity))

        const x = 60 + (index % labels.length) * cellWidth
        const y = 40 + Math.floor(index / labels.length) * cellHeight

        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`
        ctx.fillRect(x, y, cellWidth - 2, cellHeight - 2)

        // 绘制数值
        ctx.fillStyle = "#ffffff"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.font = "10px Arial"
        ctx.fillText(value, x + cellWidth / 2, y + cellHeight / 2)
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = 60 + index * cellWidth + cellWidth / 2
        const y = canvas.height / 2 - 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 气泡图
export const BubbleChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制气泡图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data)

      // 绘制气泡
      ctx.fillStyle = dataset.backgroundColor || "rgba(52, 152, 219, 0.6)"
      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding - (value / maxValue) * chartHeight
        const radius = Math.max(5, (value / maxValue) * 30)

        ctx.beginPath()
        ctx.arc(x, y, radius, 0, Math.PI * 2)
        ctx.fill()

        // 绘制数值
        ctx.fillStyle = "#ffffff"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.font = "10px Arial"
        ctx.fillText(value, x, y)
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / (labels.length - 1))
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// K线图
export const CandlestickChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"
    ctx.fillStyle = textColor
    ctx.strokeStyle = textColor

    // 绘制坐标轴
    const padding = 40
    const chartWidth = canvas.width / 2 - padding * 2
    const chartHeight = canvas.height / 2 - padding * 2

    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height / 2 - padding)
    ctx.lineTo(canvas.width / 2 - padding, canvas.height / 2 - padding)
    ctx.stroke()

    // 绘制K线图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const maxValue = Math.max(...dataset.data) * 1.1
      const minValue = Math.min(...dataset.data) * 0.9
      const valueRange = maxValue - minValue

      // 绘制K线
      const candleWidth = chartWidth / labels.length / 2

      dataset.data.forEach((value, index) => {
        const x = padding + index * (chartWidth / labels.length) + candleWidth / 2

        // 模拟开盘、收盘、最高、最低价
        const open = value * 0.95
        const close = value
        const high = value * 1.05
        const low = value * 0.9

        const openY = canvas.height / 2 - padding - ((open - minValue) / valueRange) * chartHeight
        const closeY = canvas.height / 2 - padding - ((close - minValue) / valueRange) * chartHeight
        const highY = canvas.height / 2 - padding - ((high - minValue) / valueRange) * chartHeight
        const lowY = canvas.height / 2 - padding - ((low - minValue) / valueRange) * chartHeight

        // 绘制影线
        ctx.beginPath()
        ctx.moveTo(x, highY)
        ctx.lineTo(x, lowY)
        ctx.strokeStyle = close > open ? "#2ecc71" : "#e74c3c"
        ctx.stroke()

        // 绘制实体
        ctx.fillStyle = close > open ? "#2ecc71" : "#e74c3c"
        ctx.fillRect(x - candleWidth / 2, closeY, candleWidth, openY - closeY)
      })

      // 绘制标签
      ctx.fillStyle = textColor
      ctx.textAlign = "center"
      ctx.font = "12px Arial"
      labels.forEach((label, index) => {
        const x = padding + index * (chartWidth / labels.length) + candleWidth
        const y = canvas.height / 2 - padding + 20
        ctx.fillText(label, x, y)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 矩形树图
export const TreemapChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制矩形树图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const total = dataset.data.reduce((sum, value) => sum + value, 0)

      // 生成颜色数组
      const colors = [
        "#3498db",
        "#2ecc71",
        "#e74c3c",
        "#f39c12",
        "#9b59b6",
        "#1abc9c",
        "#34495e",
        "#e67e22",
        "#7f8c8d",
        "#c0392b",
      ]

      // 简单的矩形树图布局算法
      const padding = 20
      const width = canvas.width / 2 - padding * 2
      const height = canvas.height / 2 - padding * 2

      let x = padding
      let y = padding
      let rowHeight = 0

      dataset.data.forEach((value, index) => {
        const rectWidth = (value / total) * width

        if (x + rectWidth > canvas.width / 2 - padding) {
          x = padding
          y += rowHeight + 5
          rowHeight = 0
        }

        const rectHeight = Math.min(100, height / 3)
        rowHeight = Math.max(rowHeight, rectHeight)

        // 绘制矩形
        ctx.fillStyle = colors[index % colors.length]
        ctx.fillRect(x, y, rectWidth, rectHeight)

        // 绘制标签
        if (rectWidth > 40) {
          ctx.fillStyle = "#ffffff"
          ctx.textAlign = "center"
          ctx.textBaseline = "middle"
          ctx.font = "12px Arial"
          ctx.fillText(labels[index], x + rectWidth / 2, y + rectHeight / 2)
        }

        x += rectWidth + 5
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}

// 漏斗图
export const FunnelChart = ({ data, options }) => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    // 设置 canvas 的宽高以匹配容器
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    ctx.scale(2, 2) // 提高清晰度

    const { labels, datasets } = data
    const { theme } = options

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 设置颜色
    const textColor = theme === "dark" ? "#ffffff" : "#333333"

    // 绘制漏斗图
    if (datasets && datasets.length > 0) {
      const dataset = datasets[0]
      const sortedData = [...dataset.data].sort((a, b) => b - a)
      const maxValue = sortedData[0]

      // 生成颜色数组
      const colors = [
        "#3498db",
        "#2ecc71",
        "#e74c3c",
        "#f39c12",
        "#9b59b6",
        "#1abc9c",
        "#34495e",
        "#e67e22",
        "#7f8c8d",
        "#c0392b",
      ]

      const padding = 40
      const centerX = canvas.width / 4
      const segmentHeight = (canvas.height / 2 - padding * 2) / sortedData.length

      sortedData.forEach((value, index) => {
        const topWidth = (value / maxValue) * (canvas.width / 2 - padding * 2)
        const bottomWidth =
          index < sortedData.length - 1
            ? (sortedData[index + 1] / maxValue) * (canvas.width / 2 - padding * 2)
            : topWidth * 0.6

        const y = padding + index * segmentHeight

        // 绘制梯形
        ctx.beginPath()
        ctx.moveTo(centerX - topWidth / 2, y)
        ctx.lineTo(centerX + topWidth / 2, y)
        ctx.lineTo(centerX + bottomWidth / 2, y + segmentHeight)
        ctx.lineTo(centerX - bottomWidth / 2, y + segmentHeight)
        ctx.closePath()

        ctx.fillStyle = colors[index % colors.length]
        ctx.fill()

        // 绘制标签和数值
        ctx.fillStyle = "#ffffff"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.font = "12px Arial"

        const originalIndex = dataset.data.indexOf(value)
        const label = originalIndex !== -1 ? labels[originalIndex] : ""

        ctx.fillText(`${label}: ${value}`, centerX, y + segmentHeight / 2)
      })
    }
  }, [data, options])

  return (
    <div className="w-full h-full flex items-center justify-center">
      <canvas ref={canvasRef} width={400} height={300} className="w-full h-full" />
    </div>
  )
}
